<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>

<%@ page session="false" %>

<html>
<head>
	<title>cities</title>

	<link rel="stylesheet" href="<s:theme code="styleSheet"/>" type="text/css"/>

	<script type="text/javascript" charset="utf-8" src="<c:url value='/resources/dataTables/js/jquery.js'/>"></script>	
	<script type="text/javascript" charset="utf-8" src="<c:url value='/resources/dataTables/js/jquery.dataTables.js'/>"></script>
	<link href="<c:url value='/resources/dataTables/css/demo_page.css'/>" rel="stylesheet" type="text/css" />
	<link href="<c:url value='/resources/dataTables/css/demo_table.css'/>" rel="stylesheet" type="text/css" />
	<link href="<c:url value='/resources/dataTables/css/demo_table_jui.css'/>" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" charset="utf-8">
		$(document).ready( function () {
			
		    $('#table_city').dataTable( {
		    	"sPaginationType": "full_numbers",
		    	"bPaginate": true,
		    	"bProcessing": true,
		    	"bServerSide": true,
                "sAjaxSource": "<c:url value='/ajax/datatables/cityDataSource.json'/>",
                "sServerMethod":"POST",
            	"fnDrawCallback": function( oSettings ) {
                    $('.dataTable tr').mouseover( function() {
                        $(this).toggleClass('row_selected');
                    });
                    $('.dataTable tr').mouseout( function() {
                        $(this).toggleClass('row_selected');
                    });
            	}
			} );
		} );
    </script>
</head>
<body>
<h1>
	Cities
</h1>

<div>
	<a href="?theme=black">black</a>|<a href="?theme=white">white</a>
</div>

<p>
	<div>
		<s:url value="/city/new" var="newCity_url"/>
		<a href="${newCity_url}"> Add City </a>
	</div>
	
</p>

<p>
	<table id="table_city" class="display">
	<thead>
		<tr>
			<th>id</th>
			<th>name</th>
			<th>population</th>
			<!--th></th>
			<th></th-->
		</tr>
	</thead>
	<tbody>
		<%--c:forEach var="city" items="${cities}">
		<tr>
			<td>${city.id}</td>
			<td>${city.name}</td>
			<td>${city.population}</td>
			<td>
				<a href="<s:url value="/city/edit/${city.id}"/>"> edit </a>
			</td>
			<td>
				<a href="<s:url value="/city/delete/${city.id}"/>"
					onclick="return confirm('Are you sure?')"> delete </a>
			</td>
		</tr>
		</c:forEach--%>
	</tbody>
	</table>
<br>
<p>
	<div>
		<s:url value="/person" var="persons_url"/>
		<a href="${persons_url}"> Persons </a>
	</div>
</p>


</body>
</html>
